<template>
  <div :data-index="_index"
       :data-type="compData.type"
       :key="compIndex"
       class="preview-item">
    <i class="comp-name-tip">{{compData.name}}</i>
    <slot></slot>
    <i class="el-icon-error" @click="deleteComponent(_index)"></i>
  </div>
</template>

<script>
  import CompMixins from "@/mixins/CompMixins";

  export default {
    name: "PreviewItemLoader",
    mixins: [CompMixins],
    methods: {
      deleteComponent(_index) {
        if (typeof _index === 'number') {
          this.previewList.splice(_index, 1)
        } else {
          this.removeByIndex(this.previewList, 0, _index.split('-'))
        }
      },

      removeByIndex(compAry, index, indexAry) {
        if (index + 1 === indexAry.length) {
          compAry.splice(indexAry[index], 1)
        } else {
          this.removeByIndex(compAry[indexAry[index]]['children'], index + 1, indexAry)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .preview-item {
    padding: 10px;
    cursor: move;
    transition: all .3s;
    position: relative;
    border: 1px dashed #b4b4b4;

    &:hover {
      transform: scale(0.97);
      border-radius: 10px;
      border-color: aqua;
      box-shadow: 0 0 10px #afafaf;
      background: #FFF;
    }

    .el-icon-error {
      position: absolute;
      right: -13px;
      top: -12px;
      color: red;
      font-size: 25px;
      cursor: pointer;
      display: none;
      z-index: 9999;
    }

    .comp-name-tip {
      position: absolute;
      left: 5px;
      top: 0px;
      color: red;
      font-size: 12px;
      cursor: pointer;
      display: none;
      z-index: 9999;
    }

    &:hover i.el-icon-error {
      display: block;
    }

    &:hover i.comp-name-tip {
      display: block;
    }
  }
</style>
